<template>
  <div class="total">
    <div>
      <div>
        <div class="topimg">
          <img src="@/assets/header/header-1.png" alt="" />
          <p>学习分享平台-大学课程</p>
        </div>
      </div>
      <div class="hcourse-all">
        <div v-for="cs in course" :key="cs.courseid" class="course-for">
          <div>
            <div @click="tolearn(cs.coursename)">
              <!-- 课程图 -->
              <img class="courseimg" :src="imgurl + cs.courseimage" alt="" />
              <div>
                <h3>{{ cs.coursename }}</h3>
              </div>
              <!-- 描述 -->
              <div class="dc">
                <h4>{{ cs.coursedc }}</h4>
              </div>
              <div>
                <h4 style="cursor: pointer">学习课程</h4>
              </div>
            </div>
            <div
              class="sc"
              style="cursor: pointer"
              @click="collectcourse(cs.coursename)"
            >
              收藏课程
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import { getcoursecollection } from '@/api/courseAPI.js'
export default {
  props: {
    username: {
      type: String,
    },
  },
  data() {
    return {
      course: [],
      imgurl: 'http://rnn0pzf74.hd-bkt.clouddn.com/',
    }
  },
  created() {
    const that = this
    that.getHightCourse()
  },
  methods: {
    // 查询所有高中课程
    async getHightCourse() {
      const that = this
      const { data: res } = await axios({
        method: 'GET',
        url: 'http://localhost:81/hcourse/getHCourse',
      })
      console.log('获取高中课程', res)
      that.course = res.data
      console.log(that.course)
    },
    tolearn(coursename) {
      const that = this
      if (coursename != '高一数学上') {
        that.$message.warning('该课尚未上传')
      } else {
        // this.$emit('singleCourse', {
        //   comName: 'SingleHCourse',
        //   coursename: coursename,
        // })
        that.$router.push('/hcourse/singlecourse/' + coursename)
      }
    },
    //收藏课程
    async collectcourse(coursename) {
      const that = this
      const { data: res } = await getcoursecollection(that.username,coursename)
      console.log('收藏完', res)
      if (res.code == 200) {
        that.$message.success('收藏成功')
      } else {
        that.$message.error(res.msg)
      }
    },
  },
}
</script>

<style lang="less" scoped>
.total {
  width: 100%;
  z-index: 100;
  margin-top: 20px;
  .topimg {
    position: relative;
    img {
      width: 90%;
      height: 100px;
      margin-left: 5%;
      margin-top: 20px;
      border-radius: 20px;
    }
    p {
      position: absolute;
      top: 0;
      left: 42%;
      color: white;
      font-size: 26px;
      line-height: 90px;
    }
  }
}
.hcourse-all {
  width: 1000px;
  background-color: rgb(255, 255, 255);
  margin: auto;
}
.course-for {
  display: flex;
  float: left;
  height: 380px;
  margin: 5px 5px 0 5px;
  .courseimg {
    width: 150px;
    height: 150px;
  }
  .dc {
    width: 80px;
    margin: auto;
  }
  div {
    background-color: rgb(255, 255, 255);
    h3 {
      text-align: center;
    }
    h4 {
      text-align: center;
    }
  }
  .sc {
    text-align: center;
    color: #999;
    background-color: rgb(255, 255, 255);
  }
}
</style>
